<template>
  <div class="departments-container">
    <el-card>
      <tree-tools :tree-node="company" :is-root="false" @add="handleAdd" />
      <el-tree :data="depts" :props="defaultProps" :default-expand-all="true">
        <tree-tools
          slot-scope="{ data }"
          :tree-node="data"
          @add="handleAdd"
          @edit="handleEdit"
          @refreshList="getDepartments"
        />
      </el-tree>
    </el-card>
    <add-dept
      ref="addept"
      :dialog-visible.sync="dialogVisible"
      :current-node="currentNode"
    />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { getDepartmentsAPI } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'DepartmentsIndex',
  components: { treeTools, AddDept },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' },
      depts: [
        { name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name'
      },
      currentNode: {}
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      try {
        this.loading = true
        const res = await getDepartmentsAPI()
        console.log(res)
        this.company = { name: res.companyName, manager: res.companyManage, id: '' }
        this.depts = tranListToTreeData(res.depts, '')
        // console.log(tranListToTreeData(res.depts, ''))
        // this.company = { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' },
      } catch (error) {
        this.loading = false
      }
    },
    handleAdd(node) {
      this.dialogVisible = true
      this.currentNode = node
    },
    handleEdit(node) {
      this.dialogVisible = true
      this.$refs.addept.formData = { ...node }
      this.currentNode = node
    }
  }
}
</script>

<style lang="scss" scoped>
.departments-container {
  width: 900px;
  margin: 20px auto;
  // .el-tree::v-deep {
  //   .el-tree-node__content {
  //     // padding-right: 20px;
  //   }
  // }
}
</style>

